
<template>
  <div class="listItem">
    <div class="image">
      <img
        :src="item.avtar"
        class="imageIn"
      />
    </div>
    <div class='right'>
      <div class="top">{{item.username}}</div>
      <div class="bottom">{{item.mobilePhoneNumber}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: {
        username: "",
        mobilePhoneNumber: "",
        avtar: "http://lc-jrL2k7Ch.cn-n1.lcfile.com/555885dbfe9e7a41bd68.png"
      }
    }
  },
  data() {
    return {};
  }
};
</script>
<style  lang="less" scoped>
.listItem {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.image {
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 100%;
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
</style>

    